﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
    <TITLE>询价书列表</TITLE>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <META http-equiv=Content-Language content=zh-cn>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <LINK href="../js/style.css" rel=stylesheet>
</HEAD>
<BODY>
<DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
<CENTER>
    <DIV id="app">
        <FORM name=form action="ask_do.asp" method=post>
            <INPUT type=hidden value=1 name=p_type>
            <H2><FONT color=#0070c0>询价书列表</FONT></H2>
            <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#ffffff border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
                            <TBODY>
                            <TR bgColor=#ffffff>
                                <TD noWrap align=middle>
                                    询价书名称：<INPUT size=10 v-model="searchTitle">&nbsp;&nbsp;
                                    状态：
                                    <SELECT style="WIDTH: 80px" v-model="searchStatus">
                                        <OPTION value="" selected>全部</OPTION>
                                        <OPTION value="未发布">未发布</OPTION>
                                        <OPTION value="已截止">已截止</OPTION>
                                        <OPTION value="未揭示">未揭示</OPTION>
                                        <OPTION value="已揭示">已揭示</OPTION>
                                    </SELECT>&nbsp;&nbsp;
                                    <INPUT type=button @click="performSearch" value=搜索>
                                    <INPUT type=button @click="resetSearch" value=重置>
                                </TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
            <CENTER>
                <FONT color=#000064>◆&nbsp;</FONT>
                <FONT @click="changePage(1)" :style="{ cursor: currentPage > 1 ? 'pointer' : 'default', color: currentPage > 1 ? '#0000be' : '#ccc' }">首页</FONT>&nbsp;
                <FONT @click="changePage(currentPage - 1)" :style="{ cursor: currentPage > 1 ? 'pointer' : 'default', color: currentPage > 1 ? '#0000be' : '#ccc' }">上一页</FONT>&nbsp;
                <span v-for="page in displayedPages" :key="page">
                    <FONT v-if="page === currentPage" color=#ff0000>{{ page }}</FONT>
                    <A v-else @click="changePage(page)" href="javascript:void(0);"><FONT color=#0000be>{{ page }}</FONT></A>&nbsp;
                </span>
                <FONT @click="changePage(currentPage + 1)" :style="{ cursor: currentPage < totalPages ? 'pointer' : 'default', color: currentPage < totalPages ? '#0000be' : '#ccc' }">下一页</FONT>&nbsp;
                <FONT @click="changePage(totalPages)" :style="{ cursor: currentPage < totalPages ? 'pointer' : 'default', color: currentPage < totalPages ? '#0000be' : '#ccc' }">尾页</FONT>
                <FONT color=#000064>&nbsp;共 {{ filteredData.length }} 个询价书 每页10 个询价书</FONT>
                <FONT color=#000064>&nbsp;页次:<FONT color=blue>{{ currentPage }}</FONT>/{{ totalPages }}页</FONT>
                <FONT color=#000064>&nbsp;◆&nbsp;</FONT>
                <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                    <TBODY>
                    <TR>
                        <TD>
                            <TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
                                <TBODY>
                                <!-- 表头部分 -->
                                <TR class=t1>
                                    <TD width="5%" align=middle noWrap>
                                        <div align="center">选择</div>
                                    </TD>

                                    <TD width="5%" align=middle noWrap>
                                        <div align="center">序号</div>
                                    </TD>
                                    <TD width="20%" align=middle noWrap>
                                        <div align="center">询价书标题</div>
                                    </TD>
                                    <TD width="20%" align=middle noWrap>
                                        <div align="center">询价提交时间</div>
                                    </TD>
                                    <TD width="20%" align=middle noWrap>
                                        <div align="center">询价截止时间</div>
                                    </TD>
                                    <TD width="18%" align=middle noWrap>
                                        <div align="center">询价书状态</div>
                                    </TD>
                                    <TD width="18%" align=middle noWrap>
                                        <div align="center">采购类型</div>
                                    </TD>
                                </TR>
                                <!-- 数据部分 -->
                                <TR
                                        class=t2
                                        v-for="(item, index) in paginatedData"
                                        :key="item.id"
                                        :style="{ backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#ffffff' }"
                                >
                                    <TD align=middle>
                                        <div align="center">
                                            <INPUT type=radio :value="item.id" v-model="selectedId" name=p_projno>
                                        </div>
                                    </TD>
                                    <TD>
                                        <div align="center">{{ item.id }}</div>
                                    </TD>
                                    <TD>
                                        <div align="center">
                                            <A href="javascript:void(0);" @click="goToDetail(item.id)">{{ item.num }}</A>
                                        </div>
                                    </TD>
                                    <TD>
                                        <div align="center">{{ formatDate(item.submissionTime) }}</div>
                                    </TD>

                                    <TD>
                                        <div align="center">{{ formatDate(item.deadline) }}</div>
                                    </TD>
                                    <TD>
                                        <div align="center">{{ item.status }}</div>
                                    </TD>
                                    <TD>
                                        <div align="center">{{ item.purchaseType === 'C000-1' ? '公开求购':'定向询价' }}</div>
                                    </TD>
                                </TR>
                                </TBODY>
                            </TABLE>
                        </TD>
                    </TR>
                    </TBODY>
                </TABLE>
                <P align=center>
                    <INPUT type=button @click="updateQuote" value="修改询价">
                    <INPUT type=button @click="deleteQuote" value="删除询价">
                </P>
            </CENTER>
        </FORM>
    </DIV>
</CENTER>
</BODY>
<SCRIPT>
    new Vue({
        el: '#app',
        data() {
            return {
                quoteList: [], // 询价书列表
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示的条数
                searchTitle: '', // 搜索标题
                searchStatus: '', // 搜索状态
                filteredData: [], // 过滤后的数据
                selectedId: null, // 当前选中的询价书ID
            };
        },
        computed: {
            // 总数据条数
            totalItems() {
                return this.filteredData.length;
            },
            // 总页数
            totalPages() {
                return Math.ceil(this.totalItems / this.pageSize);
            },
            // 当前页的数据
            paginatedData() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.filteredData.slice(start, end);
            },
            // 显示的页码按钮
            displayedPages() {
                const range = 5; // 显示的页码按钮数量
                let start = Math.max(1, this.currentPage - Math.floor(range / 2));
                let end = Math.min(this.totalPages, start + range - 1);
                if (end - start + 1 < range) {
                    start = Math.max(1, end - range + 1);
                }
                const pages = [];
                for (let i = start; i <= end; i++) {
                    pages.push(i);
                }
                return pages;
            }
        },
        watch: {
            // 监听选中ID的变化
            selectedId(newId) {
                this.handleSelectionChange(newId);
            }
        },
        created() {
            this.fetchQuoteList(); // 页面加载时获取询价书列表
        },
        methods: {
            //指定日期格式
            formatDate(dateString) {
                const date = new Date(dateString);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
                const day = String(date.getDate()).padStart(2, '0');       // 日期补零
                return `${year}-${month}-${day}`; // 返回格式化的日期字符串
            },
            // 使用接口获取询价书列表
            fetchQuoteList() {
                axios.get('/put/getAllList')
                    .then(response => {
                        // 字段映射
                        this.quoteList = response.data.data.map(item => ({
                            id: item.ENQUIRE_ID,                  // 对应ID
                            num: item.ENQUIRE_NUM,                // 对应询价书标题
                            submissionTime: item.START_DATE,        // 对应提交时间
                            deadline: item.END_DATE,              // 对应截止时间
                            status: item.STATUS,                  // 对应状态
                            purchaseType: item.STOCK_TYPE       // 对应采购类型
                        }));
                        this.filteredData = this.quoteList; // 初始化过滤后的数据
                    })
                    .catch(error => {
                        console.error('Error fetching quotation list:', error);
                    });
            },
            // 切换页码
            changePage(page) {
                if (page < 1 || page > this.totalPages) return;
                this.currentPage = page;
            },
            // 执行搜索
            performSearch() {
                this.filteredData = this.quoteList.filter(item => {
                    const matchesTitle = this.searchTitle ? item.num.includes(this.searchTitle) : true;
                    const matchesStatus = this.searchStatus ? item.status === this.searchStatus : true;
                    return matchesTitle && matchesStatus;
                });
                this.currentPage = 1; // 搜索后重置到第一页
            },
            // 重置搜索条件
            resetSearch() {
                this.searchTitle = '';
                this.searchStatus = '';
                this.filteredData = this.quoteList; // 重置为全部数据
                this.currentPage = 1; // 重置到第一页
            },
            // 处理选中询价书
            handleSelectionChange(id) {
                console.log('Selected quotation ID:', id);
            },
            // 跳转到询价书详情
            goToDetail(id) {
                console.log('View quotation detail:', id);
                console.log('当前询价书ID:', id);
                // 将获取到的id存入Session中
                sessionStorage.setItem('id', id);
                // TODO: 跳转到询价书详情页面
                window.location.href="Enquire_xjsmx.html";
            },
            // 修改询价
            updateQuote() {
                if (!this.selectedId) {
                    alert('请选择一个询价书进行修改');
                    return;
                }
                console.log('选择的ID为:', this.selectedId);
                // 将获取到的id存入Session中
                sessionStorage.setItem('id', this.selectedId);
                // TODO: 实现修改询价的功能
                window.location.href="Enquire_update.html";
            },
            // 删除询价
            deleteQuote() {
                if (!this.selectedId) {
                    alert('请选择一个询价书进行删除');
                    return;
                }
                if (confirm('确定要删除选中的询价书吗？')) {
                    // TODO: 实现删除询价的功能
                    axios.get(`/put/deleteQE?id=${this.selectedId}`)
                        .then(response => {
                            console.log(response.msg)
                            // 删除成功后,了列表中起初该项
                            this.quoteList = this.quoteList.filter(item => item.id !== this.selectedId);
                            // 重新计算分页
                            if (this.paginatedData.length === 0 && this.currentPage > 1){
                                this.currentPage -= 1;
                            }
                            this.resetSearch();
                    }).catch(error => {
                        console.log('出现错误!:',error)
                    });
                }
            }
        }
    });
</SCRIPT>
</HTML>